<script setup>
import { computed, onUnmounted, ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import checkResult from '@/components/checkResult.vue'
import undetectable from './components/undetectable.vue'
import faq from './components/faq.vue'
import effortlessly from './components/effortlessly.vue'
import footerCustom from '@/components/footerCustom.vue'
import everyone from './components/everyone.vue'
import falsePositives from './components/falsePositives.vue'
import coverage from './components/coverage.vue'
import solution from './components/solution.vue'
import special from './components/special.vue'

onMounted(() => {
  if (route.path === '/detector') {
    activeType.value = 2
  }
})
const route = useRoute()

const router = useRouter()
const activeType = ref(2)

const input = ref('')

const changeActiveType = (type) => {
  activeType.value = type

  if (type === 1) {
    router.push({ path: '/index' })
  }
}

const deleteIconShow = computed(() => {
  return mouseEnter.value && input.value.length > 0
})

const mouseEnter = ref(false)

// 鼠标移入事件
const onMouseEnter = () => {
  mouseEnter.value = true
}

// 鼠标移出事件
const onMouseLeave = () => {
  mouseEnter.value = false
}

//试用案例
const onTestCases = (type) => {
  if (type === 'GPT') {
    input.value =
      '在宁静的柳树溪小镇，它坐落在连绵起伏的山丘和沙沙作响的树林之间。午夜时分，一个神秘的身影在街道上游荡。此人身披如夜空般漆黑的斗篷，在月光下，双眼闪烁着如银色般的光芒。这位神秘的游荡者只被人们称作 “暗影行者”。有人说，他是复仇之灵；也有人说，他是守护着镇民的守护天使。关于他存在的传言如野火般迅速蔓延，在人们心中激起了等量的希望与恐惧。随着夜晚越来越长，阴影愈发浓重，“暗影行者” 的传说也在不断流传，始终笼罩着层层秘密与神秘的色彩。 '
  } else if (type === 'AI') {
    input.value =
      '英伟达（NVIDIA）是全球领先的图形处理技术公司之一，它重新定义了计算解决方案。这些芯片不仅为高端游戏提供支持，还驱动着从人工智能到自动驾驶汽车等方方面面的事物。英伟达在变革方面的创新包括利用Omniverse进行协作式三维设计，以及借助支持CUDA的应用程序进行加速计算。这使得通过更智能的算法进行的模拟速度更快，可视化效果更好，从而大幅缩短了完成更复杂任务所需的时间。从人工智能领域的进步到自动驾驶汽车方面的突破，英伟达正引领着行业向前发展。 '
  } else {
    input.value =
      'TikTok（抖音）永久性地改变了内容创作和消费的方式。人们可以通过算法模型看到来自家中的创意作品、独特的故事讲述者，以及展示最新潮流的网红。其内容丰富多样，涵盖了舞蹈挑战、喜剧短剧、知识科普见解，甚至还有那些感人至深的时刻。而TikTok正是这样一个平台，普通人能够在一夜之间成为热门人物，突然之间拥有影响力。TikTok吸引了全球数百万人，它将娱乐与不同文化、不同代际之间的相互理解融合在一起，营造出了一个充满活力、生气勃勃的社区。 '
  }
}

//清空文字
const onClearInput = () => {
  input.value = ''
  showTip.value = false
  changeTextMode.value = true
  checkResultShow.value = false
}

//读取用户粘贴板内容
const copy = async () => {
  try {
    const text = await navigator.clipboard.readText()
    input.value = text || ''
  } catch (error) {
    console.error('读取剪贴板内容失败：', err)
  }
}

//检查AI
const checkAI = () => {
  console.log('checkAI')
}
//默认选中AI模型
const modelValue = ref('1')

//AI模型可选项
const modeOptions = [
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTcuODUgNy42NjZzMS4zMTgtMS4zMDcgMS43NjUtMS43NjdjMS40MTQtMS4zOC43MS00LjIyNC43MS00LjIyNFM3LjQ5Ljk3MSA2LjEwNyAyLjM4NEE4Ni4wOTIgODYuMDkyIDAgMDA0LjMyOSA0LjE2cy0xLjc3LS4zNjgtMi44MjkuNjlsNS42NDUgNS42NWMxLjA2LTEuMDcyLjcwNS0yLjgzNC43MDUtMi44MzRabS0uNjkxLTQuMTQxQS45MjIuOTIyIDAgMTE4LjMyMyA0Ljk0YS45MjMuOTIzIDAgMDEtMS40MTYtLjk0NC45Mi45MiAwIDAxLjI1Mi0uNDcxWk0xLjk2IDEwLjA0YTMuNjAyIDMuNjAyIDAgMDAyLjMwNC0uOTJMMi44ODIgNy43NGMtLjkyMS40Ni0uOTIxIDIuMy0uOTIxIDIuM1onLz48L3N2Zz4=',
    value: '1',
    label: '快',
    desc: '快速:提供快速的文本人性化，轻松绕过 AI 检测器'
  },
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTExIDRsLS41LTFsLS41IDFsLTEgLjEyNWwuODM0LjcwOEw5LjUgNmwxLS42NjZsMSAuNjY2bC0uMzM0LTEuMTY3bC44MzQtLjcwOHptOC4zMzQgMTAuNjY2TDE4LjUgMTNsLS44MzQgMS42NjZsLTEuNjY2LjIwOWwxLjM4OSAxLjE4MUwxNi44MzQgMThsMS42NjYtMS4xMTFMMjAuMTY2IDE4bC0uNTU1LTEuOTQ0TDIxIDE0Ljg3NXpNNi42NjcgNi4zMzNMNiA1bC0uNjY3IDEuMzMzTDQgNi41bDEuMTExLjk0NEw0LjY2NyA5TDYgOC4xMTFMNy4zMzMgOWwtLjQ0NC0xLjU1Nkw4IDYuNXpNMy40MTQgMTdjMCAuNTM0LjIwOCAxLjAzNi41ODYgMS40MTRMNS41ODYgMjBjLjM3OC4zNzguODguNTg2IDEuNDE0LjU4NnMxLjAzNi0uMjA4IDEuNDE0LS41ODZMMjAgOC40MTRjLjM3OC0uMzc4LjU4Ni0uODguNTg2LTEuNDE0UzIwLjM3OCA1Ljk2NCAyMCA1LjU4NkwxOC40MTQgNGMtLjc1Ni0uNzU2LTIuMDcyLS43NTYtMi44MjggMEw0IDE1LjU4NmMtLjM3OC4zNzgtLjU4Ni44OC0uNTg2IDEuNDE0TTE3IDUuNDE0TDE4LjU4NiA3TDE1IDEwLjU4NkwxMy40MTQgOXonLz48L3N2Zz4=',
    value: '2',
    label: '平衡',
    desc: '平衡:提供中等级别的重写以绕过更多检测器'
  },
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTEuNSA1LjVIMnYzaC0uNUEuNS41IDAgMDExIDhWNmEuNS41IDAgMDEuNS0uNVptOC0uNzVWOWExLjAwMSAxLjAwMSAwIDAxLTEgMWgtNWExLjAwMSAxLjAwMSAwIDAxLTEtMVY0Ljc1QTEuMjUgMS4yNSAwIDAxMy43NSAzLjVINS41di0xYS41LjUgMCAxMTEgMHYxaDEuNzVBMS4yNSAxLjI1IDAgMDE5LjUgNC43NVpNNS4xMjUgNmEuNjI1LjYyNSAwIDEwLTEuMjUgMCAuNjI1LjYyNSAwIDAwMS4yNSAwWk01IDhINHYuNWgxVjhabTEuNSAwaC0xdi41aDFWOFptMS42MjUtMmEuNjI1LjYyNSAwIDEwLTEuMjUgMCAuNjI1LjYyNSAwIDAwMS4yNSAwWk04IDhIN3YuNWgxVjhabTMtMnYyYS40OTkuNDk5IDAgMDEtLjUuNUgxMHYtM2guNWEuNS41IDAgMDEuNS41WicvPjwvc3ZnPg==',
    value: '3',
    label: '积极',
    desc: '激进:应用大量更改以绕过高级检测器'
  },
  {
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTExIDUuOTk1YS4zNS4zNSAwIDAwLS4xNDItLjI4MWwuMDAyLS4wMDMtMS4yMS0uNzA0LjY5Ny0xLjIxNS0uMDAzLS4wMDFhLjM1LjM1IDAgMDAtLjEyNy0uNDMyLjM0NC4zNDQgMCAwMC0uMTUyLS4wNTRWMy4zSDguNjdWMS44OThoLS4wMDNhLjM1LjM1IDAgMDAtLjE3LS4yNjQuMzQzLjM0MyAwIDAwLS4zMTMtLjAxNmwtLjAwMi0uMDAzLTEuMjMuNzE1LS42OC0xLjE4OC0uMDAzLjAwMUEuMzQ3LjM0NyAwIDAwNS45OSAxYS4zNDUuMzQ1IDAgMDAtLjI4LjE0M2wtLjAwMi0uMDAxLS42OTIgMS4yMDctMS4xOTItLjY5My0uMDAyLjAwM2EuMzQzLjM0MyAwIDAwLS40ODIuMjhoLS4wMDR2MS4zOTZIMS45NnYuMDAyYS4zNDQuMzQ0IDAgMDAtLjMwOC4zMjguMzUuMzUgMCAwMC4wMy4xNTlsLS4wMDQuMDAyLjY4IDEuMTg3LTEuMjE3LjcxLjAwMS4wMDJhLjM0OC4zNDggMCAwMDAgLjU2MWwtLjAwMS4wMDQgMS4yMDkuNzAzLS42OTYgMS4yMTUuMDAyLjAwMWEuMzUuMzUgMCAwMC4xMjcuNDMyYy4wNDYuMDMuMDk4LjA0OS4xNTIuMDU0VjguN2gxLjM5NnYxLjQwM2guMDAzYS4zNDkuMzQ5IDAgMDAuMzI1LjMxLjM0Mi4zNDIgMCAwMC4xNTgtLjAzbC4wMDIuMDAzIDEuMjMtLjcxNS42OCAxLjE4OC4wMDMtLjAwMUEuMzQ4LjM0OCAwIDAwNi4wMSAxMWEuMzQ1LjM0NSAwIDAwLjI4LS4xNDNsLjAwMi4wMDIuNjkyLTEuMjA4IDEuMTkyLjY5My4wMDItLjAwM2EuMzQzLjM0MyAwIDAwLjQyOS0uMTI4LjM1LjM1IDAgMDAuMDU0LS4xNTNoLjAwM1Y4LjY2NWgxLjM3NnYtLjAwMmEuMzQ0LjM0NCAwIDAwLjMwOC0uMzI4LjM1Mi4zNTIgMCAwMC0uMDMtLjE1OWwuMDA0LS4wMDItLjY4LTEuMTg3IDEuMjE4LS43MDktLjAwMi0uMDAyQS4zNDkuMzQ5IDAgMDAxMSA1Ljk5NVpNNS4xODUgNy40ODRsLTEuMjc3LS41NjkuNTY0Ljk4NC0uMzE5LjE4NS0uODY0LTEuNTA4LjMyOC0uMTkgMS4yMzYuNTQ0LS41NDMtLjk0OC4zMTgtLjE4NS44NjQgMS41MDgtLjMwNy4xNzlabS42MDMtLjM1MS0uODYzLTEuNTA4IDEuMDU4LS42MTYuMTYyLjI4My0uNzQuNDMuMTgxLjMxNy43MjUtLjQyMi4xNjEuMjgzLS43MjQuNDIxLjE5Ny4zNDQuNzQtLjQzLjE2Mi4yODItMS4wNTkuNjE2Wk04LjI0IDUuNzA3bC0uODU2LS44ODMuMzMzIDEuMTg2LS4zMzguMTk4LTEuMjkzLTEuMjU5LjM1Ny0uMjA3Ljg4Ny45MzYtLjM0LTEuMjU1LjI1LS4xNDUuOTA2LjkyNi0uMzYyLTEuMjQzLjM1Ny0uMjA3LjQzOCAxLjc1Ni0uMzM5LjE5N1onLz48L3N2Zz4=',
    value: '4',
    label: '最近的',
    desc: '最新:使用我们的最新模型使 AI 文本人性化，甚至可以击败 Originality 3.0 和Turnitino。'
  }
]

//最少文字输入提示
const showTip = ref(false)

//人性化转换按钮loading
const humanizedAILoading = ref(false)

const changeTextModeLoading = ref(false)

//人性化转换事件
const onHumanizedAI = () => {
  if (input.value.length < 50) {
    showTip.value = true
    return
  }
  humanizedAILoading.value = true
  changeTextModeLoading.value = true
  clearInterval(setInterId.value)
  setInterId.value = setInterval(() => {
    percentage.value = (percentage.value % 100) + 10
  }, 500)
  setTimeout(() => {
    checkResultShow.value = true
    humanizedAILoading.value = false
    changeTextModeLoading.value = false
    changeTextMode.value = false
    changeText.value = '测试文本转换'
  }, 500)
}

const onRefreshHumanizedAI = () => {
  if (input.value.length < 50) {
    showTip.value = true
    return
  }
  changeText.value = ''
  changeTextMode.value = true
  changeTextModeLoading.value = true
  checkResultShow.value = false
  clearInterval(setInterId.value)
  setInterId.value = setInterval(() => {
    percentage.value = (percentage.value % 100) + 10
  }, 500)
  setTimeout(() => {
    changeTextMode.value = false
    changeTextModeLoading.value = false
    checkResultShow.value = true
    changeText.value = '测试文本转换'
  }, 500)
}

const inputTextarea = () => {
  showTip.value = false
  changeTextMode.value = true
  checkResultShow.value = false
}

//转换文本显示
const changeTextMode = ref(true)

//转换的文本
const changeText = ref('')
const successfulCopy = ref(false)
const successfulCopyTimeId = ref()
//复制文本
const copyText = () => {
  if (!changeText.value.length) return
  // 创建一个临时的 textarea 元素
  const textarea = document.createElement('textarea')
  textarea.value = changeText.value
  // 设置 textarea 为不可见，避免影响页面布局
  textarea.style.position = 'fixed'
  textarea.style.left = '-9999px'
  textarea.style.top = '-9999px'
  document.body.appendChild(textarea)
  // 选中文本框中的内容
  textarea.select()
  try {
    // 执行复制操作
    const successful = document.execCommand('copy')
    if (successful) {
      successfulCopy.value = true
      clearTimeout(successfulCopyTimeId.value)
      successfulCopyTimeId = setTimeout(() => {
        successfulCopy.value = false
      }, 1000)
      // alert('文本复制成功！');
    } else {
      successfulCopy.value = false
      // alert('复制失败，请重试。');
    }
  } catch (err) {
    // alert('复制过程中出现错误：' + err.message);
  }
  // 复制完成后移除临时的 textarea 元素
  document.body.removeChild(textarea)
}

const checkResultShow = ref(false)
const percentage = ref(0)
const setInterId = ref()
onUnmounted(() => {
  clearTimeout(successfulCopyTimeId.value)
  clearInterval(setInterId.value)
})

watch(percentage, (val) => {
  console.log('测试')

  if (val === 100) return clearInterval(setInterId.value)
})
</script>
<template>
  <div class="humanize">
    <div class="top" style="height: 1100px">
      <div class="top-title pt-12 text-center">
        <h1 class="font-bold text-3xl text-center md:text-2xl">每次都使用 100% 无法检测的内容绕过 AI</h1>
        <h2 class="mt-2 text-[#677788]">使用 HIX Bypass 生成类似人类的、无法检测到的文字。保证无抄袭！</h2>
      </div>
      <div class="bg-[#F7FAFF] rounded-full flex items-center w-fit mx-auto border border-[#3753751A] p-1 mt-6">
        <span
          class="flex items-center gap-1 py-1 px-5 rounded-full cursor-pointer"
          href="/"
          :class="[
            { ' text-white bg-[#3A7EFF]': activeType === 1 },
            { ' text-[#375375D9] hover:text-[#3A7EFF] hover:bg-[#E6F4FFD9]': activeType !== 1 }
          ]"
          @click="changeActiveType(1)"
          ><span class="w-5 h-5 shrink-0 i-bxs--magic-wand"></span><span class="text-sm font-medium">绕过 AI</span></span
        ><span
          :class="[
            { ' text-white bg-[#3A7EFF]': activeType === 2 },
            { ' text-[#375375D9] hover:text-[#3A7EFF] hover:bg-[#E6F4FFD9]': activeType !== 2 }
          ]"
          @click="changeActiveType(2)"
          class="cursor-pointer flex items-center gap-1 py-1 px-5 rounded-full"
          href="/ai-detector"
          ><span class="w-5 h-5 shrink-0 i-cus--robot-solid"></span><span class="text-sm font-medium">AI 探测器</span></span
        >
      </div>
      <div class="mt-6 px-4 flex items-center justify-between">
        <div class="center-left" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
          <div class="flex items-center justify-between mb-2 h-8 relative">
            <div class="flex items-center mb-3 gap-3">
              <span _msttexthash="12815439" _msthash="49">样本：</span>
              <ul class="flex items-center gap-x-3 text-sm">
                <li
                  @click="onTestCases('GPT')"
                  class="px-2 py-1 rounded bg-white hover:bg-[#E6F4FFD9] hover:text-primary cursor-pointer"
                  _msttexthash="5393141"
                  _msthash="50"
                >
                  聊天GPT
                </li>
                <li
                  @click="onTestCases('Person')"
                  class="px-2 py-1 rounded bg-white hover:bg-[#E6F4FFD9] hover:text-primary cursor-pointer"
                  _msttexthash="1834014"
                  _msthash="51"
                >
                  人
                </li>
                <li
                  @click="onTestCases('AI')"
                  class="px-2 py-1 rounded bg-white hover:bg-[#E6F4FFD9] hover:text-primary cursor-pointer"
                  _msttexthash="7195539"
                  _msthash="52"
                >
                  AI + 人类
                </li>
              </ul>
            </div>
            <div class="flex items-center gap-x-3 md:hidden">
              <div>
                <div></div>
                <div>
                  <div
                    class="flex items-center gap-x-1 cursor-pointer text-primary hover:text-primary-hover italic text-xs relative after:absolute after:bottom-0 after:right-0 after:h-3 after:w-full after:translate-y-full before:absolute before:top-0 before:left-0 before:h-3 before:w-full before:-translate-y-full"
                  >
                    <el-popover trigger="hover" placement="bottom-end" class="w-[408px] md:max-w-[88vw]" width="430">
                      <template #reference>
                        <div class="flex items-center">
                          <div class="flex items-center"><span class="i-cus--brainstorm-ideas w-[18px] h-[18px]"></span></div>
                          <span style="margin-left: 5px">使用技巧</span>
                        </div>
                      </template>
                      <div class="popover-top">
                        <div class="w-[408px] md:max-w-[88vw] text-display Content_bypassOl__wt3Qv">
                          <div class="flex items-center gap-x-1 text-sm font-semibold">
                            <div class="flex items-center">
                              <span class="i-cus--brainstorm-ideas w-[18px] h-[18px] text-[#FAAD14]"></span>
                            </div>
                            <span>使用技巧</span>
                          </div>
                          <div class="mt-2 text-sm">
                            HIX Bypass 绕过 AI 检测的成功率为 95%。如果仍然检测到输出，请不要担心，请尝试以下 3 个经过验证的提示：
                          </div>
                          <ol class="bg-[#F7FAFF] rounded">
                            <li class="text-display text-sm relative">1.单击 “Retry” 按钮再次使文本人性化。</li>
                            <li class="text-display text-sm relative">2.或者，使用我们不同的模式使 AI 文本人性化。</li>
                            <li class="text-display text-sm relative">
                              3.或者，使用不同的AI模型（如 GPT-4o、Claude等）来生成您的内容，然后再通过我们的工具运行它。
                            </li>
                          </ol>
                          <div class="mt-2 text-sm">如果它仍然不起作用，请点击“不喜欢”告诉我们，向我们发送反馈。</div>
                        </div>
                      </div>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              border-color: transparent;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              position: relative;
            "
            class="center-left-bottom border rounded-lg p-6 md:p-4 bg-white h-[600px] 2xl:h-[500px] md:h-[450px] shadow-cardPlan group border-[#FFF]"
          >
            <el-icon class="delete-icon" v-if="deleteIconShow" @click="onClearInput"><Delete /></el-icon>
            <el-input
              v-model="input"
              autosize
              type="textarea"
              @input="inputTextarea"
              maxlength="10000"
              style="max-height: 380px; overflow-x: auto; margin-top: 5px"
              placeholder="在这里输入您要人性化的文本"
              class="no-border-input"
            />
            <div class="pointer-events-none flex items-center gap-3 z-[3] flex-wrap w-full justify-center" v-if="!input.length">
              <!-- <div
                @click="onTestCases"
                class="p-[14px] flex flex-col items-center justify-center space-y-2 rounded-lg w-fit h-fit min-w-[160px] text-xs group transition-all hover:cursor-pointer bg-[#F6F8FA] hover:bg-[#E6F4FF] text-[#677788] hover:text-[#3A7EFF] text-center pointer-events-auto"
              >
                <span class="i-bx--file w-7 h-7"></span><span>试用示例</span>
              </div> -->
              <div
                @click="copy"
                class="p-[14px] flex flex-col items-center justify-center space-y-2 rounded-lg w-fit h-fit min-w-[160px] text-xs group transition-all hover:cursor-pointer bg-[#F6F8FA] hover:bg-[#E6F4FF] text-[#677788] hover:text-[#3A7EFF] text-center pointer-events-auto"
              >
                <span class="i-com--copy w-7 h-7"></span><span>粘贴文本</span>
              </div>
            </div>
            <div class="flex items-center w-full mt-4 justify-end">
              <div class="flex items-center">
                <el-button type="primary" plain @click="onHumanizedAI">检查 AI</el-button>
                <div style="margin-left: 0.75rem" class="text-[#94A2AE] text-sm">
                  <span class="px-1">{{ input.length }}/10000</span>的话
                </div>
              </div>
              <!-- <div class="flex items-center">
                <div>
                  模式:
                  <el-select v-model="modelValue" placeholder="Select" style="width: 150px; margin-left: 0.75rem">
                    <template #label="{ label, value }">
                      <div class="flex items-center">
                        <img :src="modeOptions.find((item) => item.value === value).img" alt="" class="w-4 h-4" />
                        <span style="margin-left: 10px">{{ label }}</span>
                      </div>
                    </template>
                    <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="item.value">
                      <el-tooltip effect="light" placement="right" :hide-after="10">
                        <template #content>
                          <div style="padding: 2px 5px">{{ item.desc }}</div>
                        </template>
                        <div class="flex items-center w-full">
                          <img :src="item.img" alt="" class="w-4 h-4" />
                          <span style="margin-left: 10px">{{ item.label }}</span>
                        </div>
                      </el-tooltip>
                    </el-option>
                  </el-select>
                </div>
                <el-button
                  :type="input.length ? 'primary' : 'info'"
                  style="margin-left: 0.75rem"
                  :plain="!Boolean(input.length)"
                  :loading="humanizedAILoading"
                  @click="onHumanizedAI"
                  :disabled="!Boolean(input.length)"
                >
                  <span class="i-cus--gpt4 w-4 h-4"></span>
                  人性化</el-button
                >
              </div> -->
            </div>
            <div
              v-if="showTip"
              class="text-start flex justify-end mt-1 text-xs text-[#F77062]"
              style="position: absolute; bottom: 0; right: 15px"
            >
              您的输入应至少包含 50 个单词。
            </div>
          </div>
        </div>
        <div class="center-right">
          <div class="flex items-center justify-between mb-2 h-8 relative">
            <div class="font-semibold">输出</div>
          </div>
          <div
            style="border-color: transparent; display: flex; flex-direction: column; justify-content: space-between"
            class="center-left-bottom border rounded-lg p-6 md:p-4 bg-white h-[600px] 2xl:h-[500px] md:h-[450px] shadow-cardPlan group border-[#FFF]"
          >
            <template v-if="changeTextMode">
              <div class="h-full w-full">
                <div class="w-full h-full flex items-center justify-center flex-col gap-y-4">
                  <template v-if="changeTextModeLoading">
                    <div class="w-[98px] h-[80px] relative">
                      <img
                        alt="empty icon"
                        loading="lazy"
                        decoding="async"
                        data-nimg="fill"
                        class="object-cover"
                        style="position: absolute; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; color: transparent"
                        src="@/assets/img/loading.gif"
                      />
                    </div>
                    <div class="font-semibold text-center">转换中...</div>
                  </template>
                  <template v-if="!changeTextModeLoading">
                    <div class="w-[98px] h-[80px] relative">
                      <img
                        alt="empty icon"
                        loading="lazy"
                        decoding="async"
                        data-nimg="fill"
                        class="object-cover"
                        style="position: absolute; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; color: transparent"
                        src="@/assets/img/empty-icon.webp"
                      />
                    </div>
                    <div>检查结果将显示在此处</div>
                    <!-- pb-5 px-5 mt-auto -->
                    <div class="">
                      <div
                        class="p-6 rounded-xl shadow-card2 text-left"
                        style="background: linear-gradient(90deg, rgb(219, 255, 231) 0%, rgb(189, 239, 255) 47.5%, rgb(213, 203, 255) 100%)"
                      >
                        <h3 class="text-lg font-bold mb-3 flex items-start gap-x-1">
                          <span class="i-cus--hix-ai w-5 h-5 mt-1"></span
                          ><span _mstmutation="1" _msttexthash="13970944" _msthash="57">试用 HIX Bypass 的 AI Humanizer</span>
                        </h3>
                        <ul class="text-sm flex mb-5 flex-col gap-1 list-disc pl-5">
                          <li _msttexthash="95390321" _msthash="58">创建具有 100% 人工评分的无法检测的 AI 内容</li>
                          <li _msttexthash="82178304" _msthash="59">绕过 Turnitin、GPTZero、Originality.ai 等 AI 检测器。</li>
                          <li _msttexthash="68067649" _msthash="60">获得 100% 无抄袭、无重复的输出</li>
                        </ul>
                        <button
                          class="bg-black rounded-xl w-full h-[56px] hover:bg-opacity-80 flex items-center justify-center gap-x-2 text-xl font-bold group"
                          style="box-shadow: rgba(0, 0, 0, 0.32) 0px 7.17px 10.75px 0px; cursor: pointer"
                        >
                          <span class="i-cus--smiling-sparkles w-6 h-6"></span
                          ><span class="RemoveToolCard_textColor2__1f1gr" _msttexthash="15419677" _msthash="61">人性化 AI 文本</span
                          ><span
                            class="transition-all duration-300 group-hover:translate-x-2 i-com--right-arrow w-7 h-7 text-[#4ABEFF]"
                          ></span>
                        </button>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </template>
            <template v-if="!changeTextMode">
              <!-- <el-text
                style="
                  max-height: 380px;
                  overflow-x: auto;
                  color: var(--el-input-text-color, var(--el-text-color-regular));
                  display: block;
                  font-family: inherit;
                  font-size: 14px;
                  line-height: 1.5;
                  align-self: auto;
                "
                >{{ changeText }}</el-text
              > -->
              <checkResult v-if="checkResultShow" :percentage="percentage"></checkResult>
              <div class="flex items-center w-full mt-4 justify-end">
                <!-- <div class="flex items-center">
                  <div style="margin-left: 0.75rem" class="text-[#94A2AE] text-sm">
                    <span class="px-1">{{ changeText.length }}</span
                    >的话
                  </div>
                </div> -->
                <div>
                  <el-tooltip content="重试">
                    <el-icon class="customIcon" style="margin-right: 10px" @click="onRefreshHumanizedAI"><RefreshRight /></el-icon>
                  </el-tooltip>
                  <!-- <template v-if="!successfulCopy">
                    <el-tooltip content="复制">
                      <el-icon class="customIcon" @click="copyText"><DocumentCopy /></el-icon>
                    </el-tooltip>
                  </template>
                  <template v-if="successfulCopy">
                    <el-tooltip content="复制成功">
                      <el-icon class="customIcon" style="color: #00c2a7"><SuccessFilled /></el-icon>
                    </el-tooltip>
                  </template> -->
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <undetectable></undetectable>
      <everyone></everyone>
      <falsePositives></falsePositives>
      <coverage></coverage>
      <solution></solution>
      <special></special>
      <faq></faq>
      <effortlessly></effortlessly>
      <footerCustom></footerCustom>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import '@/assets/css/humanize.less';
.text-left {
  text-align: left;
}
.p-6 {
  padding: 1.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.font-bold {
  font-weight: 700;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
}
.items-start {
  align-items: flex-start;
}

.i-cus--hix-ai,
.i-cus--hix-scholar {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.i-cus--hix-ai {
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48cGF0aCBmaWxsPScjMDFDRUIyJyBkPSdNMyA1LjdBMi43IDIuNyAwIDAxNS43IDNIMTJhOSA5IDAgMDE5IDl2Ni4zYTIuNyAyLjcgMCAwMS0yLjcgMi43SDEyYTkgOSAwIDAxLTktOVY1LjdaJy8+PHBhdGggZmlsbD0nI2ZmZicgZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNNS43IDExLjU1YTMuNiAzLjYgMCAwMTMuNi0zLjZoNS41MTZhMy40ODQgMy40ODQgMCAwMTEuODY2IDYuNDI2bC00LjA3MSAyLjU4MmEuMy4zIDAgMDEtLjQ2MS0uMjUzdi0uNzYzYS43OTIuNzkyIDAgMDAtLjc5Mi0uNzkySDkuM2EzLjYgMy42IDAgMDEtMy42LTMuNlptNC41IDBhMS4yIDEuMiAwIDExLTIuNCAwIDEuMiAxLjIgMCAwMTIuNCAwWm00LjggMS4yYTEuMiAxLjIgMCAxMDAtMi40IDEuMiAxLjIgMCAwMDAgMi40WicgY2xpcC1ydWxlPSdldmVub2RkJy8+PC9nPjwvc3ZnPg==);
}
.flex {
  display: flex;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.w-5 {
  width: 1.25rem;
}
.h-5 {
  height: 1.25rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.flex {
  display: flex;
}
.list-disc {
  list-style-type: disc;
}
.flex-col {
  flex-direction: column;
}
.gap-1 {
  gap: 0.25rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.i-cus--smiling-sparkles {
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48ZyBmaWx0ZXI9J3VybCgjc21pbGluZy1zcGFya2xlc19hKSc+PHBhdGggZmlsbD0ndXJsKCNzbWlsaW5nLXNwYXJrbGVzX2IpJyBkPSdNMTEuODY2IDguMzNjLS4xMjguNDk2LS41NjIuODY3LTEuMDc1IDEuMTIzLTEuNDU0LjUwMy0yLjYwMi45ODctMy41NTMgMS40NTctLjg0Mi40MTYtLjgzMyAxLjczLjAxIDIuMTQuOTg3LjQ4IDIuMjI1Ljk0IDMuNiAxLjQ4Ni4zNy4xNDYuODkzLjU2IDEuMDIzIDEuMDcuNDIgMS42MTYuOTM3IDMuMjA3IDEuNTQ3IDQuNzYyLjQ2NiAxLjE5IDEuNjE5IDEuMTg5IDIuMDg4IDAgLjYwNy0xLjU0NCAxLjA3LTMuMjEyIDEuNTkxLTQuNzk4YTEuNTE1IDEuNTE1IDAgMDEuOTctMS4wNDYgNTIuMjMyIDUyLjIzMiAwIDAwMy41NDEtMS40MTdjLjk0NS0uNDE2Ljk2NS0xLjc2Ny4wMzItMi4yMWE0MS44MDggNDEuODA4IDAgMDAtMy41NzgtMS41MDYgMS42MjIgMS42MjIgMCAwMS0xLjAwNS0xLjA0OWMtLjU2NS0xLjczMi0uOTI0LTMuMjAyLTEuNTI1LTQuNzI4LS40NjktMS4xOS0xLjY5OC0xLjE1Mi0yLjE2OC4wMzYtLjU5OCAxLjUyMS0xLjAxNiAzLjAzNC0xLjQ5OCA0LjY4WicvPjwvZz48cGF0aCBmaWxsPSd1cmwoI3NtaWxpbmctc3BhcmtsZXNfYyknIGQ9J00xMS44NjYgOC4zM2MtLjEyOC40OTYtLjU2Mi44NjctMS4wNzUgMS4xMjMtMS40NTQuNTAzLTIuNjAyLjk4Ny0zLjU1MyAxLjQ1Ny0uODQyLjQxNi0uODMzIDEuNzMuMDEgMi4xNC45ODcuNDggMi4yMjUuOTQgMy42IDEuNDg2LjM3LjE0Ni44OTMuNTYgMS4wMjMgMS4wNy40MiAxLjYxNi45MzcgMy4yMDcgMS41NDcgNC43NjIuNDY2IDEuMTkgMS42MTkgMS4xODkgMi4wODggMCAuNjA3LTEuNTQ0IDEuMDctMy4yMTIgMS41OTEtNC43OThhMS41MTUgMS41MTUgMCAwMS45Ny0xLjA0NiA1Mi4yMzIgNTIuMjMyIDAgMDAzLjU0MS0xLjQxN2MuOTQ1LS40MTYuOTY1LTEuNzY3LjAzMi0yLjIxYTQxLjgwOCA0MS44MDggMCAwMC0zLjU3OC0xLjUwNiAxLjYyMiAxLjYyMiAwIDAxLTEuMDA1LTEuMDQ5Yy0uNTY1LTEuNzMyLS45MjQtMy4yMDItMS41MjUtNC43MjgtLjQ2OS0xLjE5LTEuNjk4LTEuMTUyLTIuMTY4LjAzNi0uNTk4IDEuNTIxLTEuMDE2IDMuMDM0LTEuNDk4IDQuNjhaJy8+PGcgZmlsdGVyPSd1cmwoI3NtaWxpbmctc3BhcmtsZXNfZCknPjxwYXRoIGZpbGw9J3VybCgjc21pbGluZy1zcGFya2xlc19lKScgZD0nTTUuODI2IDQuMzYyYy0uMDQxLjE2LS4xOC4yNzktLjM0Ni4zNjFhOS43NiA5Ljc2IDAgMDAtMS4xNDMuNDdjLS4yNzEuMTMzLS4yNjkuNTU2LjAwMy42ODguMzE4LjE1NS43MTYuMzAzIDEuMTU4LjQ3OC4xMi4wNDcuMjg4LjE4MS4zMy4zNDUuMTI5LjUwNS4zMDQgMS4wMzkuNDk4IDEuNTMyLjE1LjM4NC41Mi4zODMuNjcyIDAgLjE5NS0uNDk2LjM0NS0xLjAzMy41MTItMS41NDRhLjQ4OC40ODggMCAwMS4zMTMtLjMzN2MuMzg1LS4xMzcuNzY1LS4yOSAxLjE0LS40NTVhLjM5Mi4zOTIgMCAwMC4wMS0uNzEyYy0uMzIyLS4xNTEtLjcyLS4zMjctMS4xNTMtLjQ4NGEuNTIyLjUyMiAwIDAxLS4zMjMtLjMzOGMtLjE4Mi0uNTU4LS4yOTgtMS4wMy0uNDkxLTEuNTIyLS4xNS0uMzgzLS41NDctLjM3LS42OTguMDEyLS4xOTIuNDktLjMyNy45NzYtLjQ4MiAxLjUwNlonLz48L2c+PHBhdGggZmlsbD0ndXJsKCNzbWlsaW5nLXNwYXJrbGVzX2YpJyBkPSdNNS44MjYgNC4zNjJjLS4wNDEuMTYtLjE4LjI3OS0uMzQ2LjM2MWE5Ljc2IDkuNzYgMCAwMC0xLjE0My40N2MtLjI3MS4xMzMtLjI2OS41NTYuMDAzLjY4OC4zMTguMTU1LjcxNi4zMDMgMS4xNTguNDc4LjEyLjA0Ny4yODguMTgxLjMzLjM0NS4xMjkuNTA1LjMwNCAxLjAzOS40OTggMS41MzIuMTUuMzg0LjUyLjM4My42NzIgMCAuMTk1LS40OTYuMzQ1LTEuMDMzLjUxMi0xLjU0NGEuNDg4LjQ4OCAwIDAxLjMxMy0uMzM3Yy4zODUtLjEzNy43NjUtLjI5IDEuMTQtLjQ1NWEuMzkyLjM5MiAwIDAwLjAxLS43MTJjLS4zMjItLjE1MS0uNzItLjMyNy0xLjE1My0uNDg0YS41MjIuNTIyIDAgMDEtLjMyMy0uMzM4Yy0uMTgyLS41NTgtLjI5OC0xLjAzLS40OTEtMS41MjItLjE1LS4zODMtLjU0Ny0uMzctLjY5OC4wMTItLjE5Mi40OS0uMzI3Ljk3Ni0uNDgyIDEuNTA2WicvPjxnIGZpbHRlcj0ndXJsKCNzbWlsaW5nLXNwYXJrbGVzX2cpJz48cGF0aCBmaWxsPSd1cmwoI3NtaWxpbmctc3BhcmtsZXNfaCknIGQ9J00zLjkyIDE1LjA1Yy0uMDU3LjIyMi0uMjUyLjM4OC0uNDgzLjUwMy0uNjUyLjIyNS0xLjE2OC40NDMtMS41OTUuNjU0LS4zNzcuMTg3LS4zNzMuNzc3LjAwNS45Ni40NDMuMjE2Ljk5OS40MjMgMS42MTYuNjY4LjE2Ni4wNjUuNC4yNTEuNDU5LjQ4LjE4LjcwMy40MjQgMS40NDkuNjk0IDIuMTM3LjIxLjUzNC43MjcuNTM0LjkzNyAwIC4yNzMtLjY5My40OC0xLjQ0MS43MTQtMi4xNTRhLjY4LjY4IDAgMDEuNDM2LS40NjkgMjMuMzk3IDIzLjM5NyAwIDAwMS41OS0uNjM1LjU0Ny41NDcgMCAwMC4wMTMtLjk5MmMtLjUyNC0uMjUtMS4wNi0uNDc2LTEuNjA1LS42NzZhLjcyOC43MjggMCAwMS0uNDUxLS40NzFjLS4yNTQtLjc3OC0uNDE1LTEuNDM3LS42ODUtMi4xMjMtLjIxLS41MzItLjc2My0uNTE3LS45NzMuMDE4LS4yNjguNjgyLS40NTYgMS4zNi0uNjcyIDIuMVonLz48L2c+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdzbWlsaW5nLXNwYXJrbGVzX2InIHgxPScxOS41OTcnIHgyPScxMS4yODknIHkxPSc4LjQ1MycgeTI9JzE3LjE5OCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnPjxzdG9wIHN0b3AtY29sb3I9JyNGRkNGNUEnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNGRUEyNTQnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nc21pbGluZy1zcGFya2xlc19jJyB4MT0nMTEuMDY2JyB4Mj0nMTUuNTk0JyB5MT0nMjEuOTY4JyB5Mj0nMTIuNDE1JyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nI0ZGODg2RCcvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI0ZGODg2RCcgc3RvcC1vcGFjaXR5PScwJy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J3NtaWxpbmctc3BhcmtsZXNfZScgeDE9JzguMzE1JyB4Mj0nNS42NDEnIHkxPSc0LjQwMicgeTI9JzcuMjE2JyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nI0ZGREE3MicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI0Y3QTk2NycvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdzbWlsaW5nLXNwYXJrbGVzX2YnIHgxPSc2LjY2NScgeDI9JzYuNjY1JyB5MT0nOC45ODUnIHkyPSc1Ljg5MScgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnPjxzdG9wIHN0b3AtY29sb3I9JyNGREEwNzEnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNGREEwNzEnIHN0b3Atb3BhY2l0eT0nMCcvPjwvbGluZWFyR3JhZGllbnQ+PGZpbHRlciBpZD0nc21pbGluZy1zcGFya2xlc19hJyB3aWR0aD0nMTYuMjA1JyBoZWlnaHQ9JzE4Ljg5NScgeD0nNi4zMTEnIHk9JzIuNTUzJyBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9J3NSR0InIGZpbHRlclVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0nMCcgcmVzdWx0PSdCYWNrZ3JvdW5kSW1hZ2VGaXgnLz48ZmVCbGVuZCBpbj0nU291cmNlR3JhcGhpYycgaW4yPSdCYWNrZ3JvdW5kSW1hZ2VGaXgnIHJlc3VsdD0nc2hhcGUnLz48ZmVDb2xvck1hdHJpeCBpbj0nU291cmNlQWxwaGEnIHJlc3VsdD0naGFyZEFscGhhJyB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwJy8+PGZlT2Zmc2V0IGR4PScuMTg4JyBkeT0nLS4xODgnLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPScuMTg4Jy8+PGZlQ29tcG9zaXRlIGluMj0naGFyZEFscGhhJyBrMj0nLTEnIGszPScxJyBvcGVyYXRvcj0nYXJpdGhtZXRpYycvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwLjkzNzI1NSAwIDAgMCAwIDAuNDgyMzUzIDAgMCAwIDAgMC4zMjk0MTIgMCAwIDAgMSAwJy8+PGZlQmxlbmQgaW4yPSdzaGFwZScgcmVzdWx0PSdlZmZlY3QxX2lubmVyU2hhZG93XzMwMjQyXzIwNjY2Jy8+PGZlQ29sb3JNYXRyaXggaW49J1NvdXJjZUFscGhhJyByZXN1bHQ9J2hhcmRBbHBoYScgdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCcvPjxmZU9mZnNldCBkeD0nLjE4OCcgZHk9Jy4xODgnLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPScuMzc1Jy8+PGZlQ29tcG9zaXRlIGluMj0naGFyZEFscGhhJyBrMj0nLTEnIGszPScxJyBvcGVyYXRvcj0nYXJpdGhtZXRpYycvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwLjczNzI1NSAwIDAgMCAwIDAuNjE1Njg2IDAgMCAwIDAgMC40MTU2ODYgMCAwIDAgMSAwJy8+PGZlQmxlbmQgaW4yPSdlZmZlY3QxX2lubmVyU2hhZG93XzMwMjQyXzIwNjY2JyByZXN1bHQ9J2VmZmVjdDJfaW5uZXJTaGFkb3dfMzAyNDJfMjA2NjYnLz48ZmVDb2xvck1hdHJpeCBpbj0nU291cmNlQWxwaGEnIHJlc3VsdD0naGFyZEFscGhhJyB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwJy8+PGZlT2Zmc2V0IGR4PSctLjMnIGR5PScuMTg4Jy8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nLjE1Jy8+PGZlQ29tcG9zaXRlIGluMj0naGFyZEFscGhhJyBrMj0nLTEnIGszPScxJyBvcGVyYXRvcj0nYXJpdGhtZXRpYycvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAxIDAgMCAwIDAgMC45MDE5NjEgMCAwIDAgMCAwLjQ1ODgyNCAwIDAgMCAxIDAnLz48ZmVCbGVuZCBpbjI9J2VmZmVjdDJfaW5uZXJTaGFkb3dfMzAyNDJfMjA2NjYnIHJlc3VsdD0nZWZmZWN0M19pbm5lclNoYWRvd18zMDI0Ml8yMDY2NicvPjwvZmlsdGVyPjxmaWx0ZXIgaWQ9J3NtaWxpbmctc3BhcmtsZXNfZCcgd2lkdGg9JzUuMjEnIGhlaWdodD0nNi4wMzYnIHg9JzQuMDYnIHk9JzIuNTYzJyBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9J3NSR0InIGZpbHRlclVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0nMCcgcmVzdWx0PSdCYWNrZ3JvdW5kSW1hZ2VGaXgnLz48ZmVCbGVuZCBpbj0nU291cmNlR3JhcGhpYycgaW4yPSdCYWNrZ3JvdW5kSW1hZ2VGaXgnIHJlc3VsdD0nc2hhcGUnLz48ZmVDb2xvck1hdHJpeCBpbj0nU291cmNlQWxwaGEnIHJlc3VsdD0naGFyZEFscGhhJyB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwJy8+PGZlT2Zmc2V0IGR4PScuMDc1JyBkeT0nLjA3NScvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249Jy4wNzUnLz48ZmVDb21wb3NpdGUgaW4yPSdoYXJkQWxwaGEnIGsyPSctMScgazM9JzEnIG9wZXJhdG9yPSdhcml0aG1ldGljJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuODAzOTIyIDAgMCAwIDAgMC42IDAgMCAwIDAgMC4yNjI3NDUgMCAwIDAgMSAwJy8+PGZlQmxlbmQgaW4yPSdzaGFwZScgcmVzdWx0PSdlZmZlY3QxX2lubmVyU2hhZG93XzMwMjQyXzIwNjY2Jy8+PGZlQ29sb3JNYXRyaXggaW49J1NvdXJjZUFscGhhJyByZXN1bHQ9J2hhcmRBbHBoYScgdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCcvPjxmZU9mZnNldCBkeD0nLS4wNzUnIGR5PScuMDc1Jy8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nLjA3NScvPjxmZUNvbXBvc2l0ZSBpbjI9J2hhcmRBbHBoYScgazI9Jy0xJyBrMz0nMScgb3BlcmF0b3I9J2FyaXRobWV0aWMnLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMSAwIDAgMCAwIDAuODgyMzUzIDAgMCAwIDAgMC40MjM1MjkgMCAwIDAgMSAwJy8+PGZlQmxlbmQgaW4yPSdlZmZlY3QxX2lubmVyU2hhZG93XzMwMjQyXzIwNjY2JyByZXN1bHQ9J2VmZmVjdDJfaW5uZXJTaGFkb3dfMzAyNDJfMjA2NjYnLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSdzbWlsaW5nLXNwYXJrbGVzX2cnIHdpZHRoPSc3LjE2NycgaGVpZ2h0PSc4LjQyNCcgeD0nMS41NjEnIHk9JzEyLjQyOCcgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJyBmaWx0ZXJVbml0cz0ndXNlclNwYWNlT25Vc2UnPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9JzAnIHJlc3VsdD0nQmFja2dyb3VuZEltYWdlRml4Jy8+PGZlQmxlbmQgaW49J1NvdXJjZUdyYXBoaWMnIGluMj0nQmFja2dyb3VuZEltYWdlRml4JyByZXN1bHQ9J3NoYXBlJy8+PGZlQ29sb3JNYXRyaXggaW49J1NvdXJjZUFscGhhJyByZXN1bHQ9J2hhcmRBbHBoYScgdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCcvPjxmZU9mZnNldCBkeD0nLjExMycgZHk9Jy0uMTEzJy8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nLjExMycvPjxmZUNvbXBvc2l0ZSBpbjI9J2hhcmRBbHBoYScgazI9Jy0xJyBrMz0nMScgb3BlcmF0b3I9J2FyaXRobWV0aWMnLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMSAwIDAgMCAwIDAuNDU4ODI0IDAgMCAwIDAgMC40NjI3NDUgMCAwIDAgMSAwJy8+PGZlQmxlbmQgaW4yPSdzaGFwZScgcmVzdWx0PSdlZmZlY3QxX2lubmVyU2hhZG93XzMwMjQyXzIwNjY2Jy8+PC9maWx0ZXI+PHJhZGlhbEdyYWRpZW50IGlkPSdzbWlsaW5nLXNwYXJrbGVzX2gnIGN4PScwJyBjeT0nMCcgcj0nMScgZ3JhZGllbnRUcmFuc2Zvcm09J3JvdGF0ZSgxMjcuMjIxIC4zIDguODI2KXNjYWxlKDUuMzA2OTkgNS4xNjgpJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agb2Zmc2V0PScuMzY1JyBzdG9wLWNvbG9yPScjRkZCQzY0Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjRkY4RjZCJy8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9nPjwvc3ZnPg==);
}
.i-cus--smiling-face,
.i-cus--smiling-sparkles {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.w-6 {
  width: 1.5rem;
}
.h-6 {
  height: 1.5rem;
}
.RemoveToolCard_textColor2__1f1gr {
  background: linear-gradient(93.65deg, #f81 18.63%, #ed27ff 48.05%, #936bff 63.99%, #49beff 82.01%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.duration-300 {
  transition-duration: 0.3s;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.text-\[\#4ABEFF\] {
  --tw-text-opacity: 1;
  color: rgb(74 190 255 / var(--tw-text-opacity, 1));
}
.i-com--right-arrow {
  --svg: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0OCA0OCcgd2lkdGg9JzQ4JyBoZWlnaHQ9JzQ4Jz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTIzLjE0IDM1LjA0OSA4LjkxMy04Ljk2Mkg4di00LjE3NGgyNC4wNTNsLTguOTEyLTguOTYxTDI2LjA3NSAxMCA0MCAyNCAyNi4wNzYgMzhsLTIuOTM2LTIuOTUyWicvPjwvc3ZnPg==);
}
.i-com--right,
.i-com--right-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.w-7 {
  width: 1.75rem;
}
.h-7 {
  height: 1.75rem;
}
.hover\:bg-opacity-80:hover {
  --tw-bg-opacity: 0.8;
}
.gap-3 {
  gap: 0.75rem;
}
.items-center {
  align-items: center;
}
.flex {
  display: flex;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
  column-gap: 0.75rem;
}
.items-center {
  align-items: center;
}
.flex {
  display: flex;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.rounded {
  border-radius: 0.25rem;
}
.cursor-pointer {
  cursor: pointer;
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  --ux-primary: 58 126 255;
  color: rgb(var(--ux-primary) / var(--tw-text-opacity, 1));
}
.hover\:bg-\[\#E6F4FFD9\]:hover {
  background-color: #e6f4ffd9;
}
</style>
